<template>
    <div id="userGift">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <div class="main-container" v-if="gamesList.length">
            <scroll class="more-list" ref="scroll" 
                :data="gamesList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                <div class="game-list">
                    <div class="game-list-wrap">
                        <div class="list-wrap" v-for="(item,index) in gamesList" :key="index">
                            <div class="item">
                                <div class="avator">
                                    <img v-lazy="item.url" alt="">
                                </div>
                                <div class="info">
                                    <div class="desc">
                                        <div class="name">{{item.name}}</div>
                                        <div class="game_msg">
                                            <div class="key">KEY:{{item.key}}</div>
                                            <div class="time">有效期：{{item.start_time | filtertimestamp}} 到 {{item.end_time | filtertimestamp}}</div>
                                        </div>  
                                    </div>
                                    <div class="copy">
                                        <button :data-clipboard-text="item.key" @click='copy'>复制</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </scroll>
        </div>
        <!-- 没有数据 -->
        <noData v-else :title="'暂未领取礼包'"></noData>
        <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="gamesList.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
import navbar from "common/navbar";
import noData from "common/noData"
import { userGift } from "api/game_box.js";
import Loading from "common/loading";
import Loadinglist from "common/LoadingList";
import Scroll from "common/scroll";
import Clipboard from "clipboard";
import { Toast } from "vant"
import {formatDate} from 'js/date'
export default {
  data() {
    return {
      title: "我的礼包",
      row: true, //loading文字水平显示
      isload: false, //是否正在加载
      scrollY: true, //垂直滚动
      scrollX: false, //水平滚动
      pullup: true, //上拉加载
      beforeScroll: true,
      bounce: false, //动画
      more: true, //下拉加载是否还有更多
      showLoading: true,
      gamesList: [],
      page: 1
    };
  },
  created() {
    this.getList();
  },
   filters:{
        filtertimestamp(time){
          let date = new Date(time*1000);
          return formatDate(date, 'yyyy-MM-dd');
      }
  },
  methods: {
    getList() {
      userGift(this.page).then(res => {
        if (res.data.error == 0) {
          this.showLoading = false;
          this.gamesList = res.data.content.data;
          let totalPage = res.data.content.totalPage;
          if (this.page == totalPage) {
            this.more = false;
            this.isload = true;
          }
        } else {
          this.showLoading = false;
          this.more = false;
          this.isload = true;
        }
      });
    },
    _getMoreList() {
      if (this.isload == true) {
          return;
      }
      this.page++;
      this.isload = true;
      userGift(this.page).then(res=>{
          if (res.data.error == 0) {
              let totalPage=res.data.content.totalPage;
              res = res.data.content.data;
              this.isload = false;
              this.gamesList = this.gamesList.concat(res);
              if(this.page==totalPage){
                  this.more = false;
                  this.isload = true;
              }
          }
      })
    },
    copy() {
      var clipboard = new Clipboard(".copy button");
      clipboard.on("success", e => {
        Toast.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        Toast.fail("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  },
  components: {
    navbar,
    Loading,
    Loadinglist,
    Scroll,
    noData
  }
};
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}
.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
#userGift {
  width: 7.5rem;
  margin:0 auto;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow: scroll;
}
.placeholder {
  width: 100%;
  height: 0.8rem;
}
.main-container {
  padding-bottom: 0.2rem;
}
.game-list {
  padding: 0 0.4rem;
}
.item {
  display: flex;
  min-height: 1.75rem;
  margin-top: 0.22rem;
  .avator {
    img {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .info {
    flex: 1;
    margin-left: 0.16rem;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.22rem;
    border-bottom: 1px solid #ccced3;
    .desc {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: $font-size-m;
      }
      .key {
        margin:0.05rem 0;
        color: #8e8d93;
        word-break: break-word;
      }
      .time{
        font-size: 10px;
        color: #8e8d93;
      }
    }
    .copy {
      padding: 0.3rem 0 0.3rem 0.3rem;
      display:flex;
      align-items: center;
      button {
        @include down-btn();
        background: #fed404;
        border-radius:0.23rem;
      }
    }
  }
  &.item-type1 {
    padding: 0 0.4rem;
  }
}
</style>